<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:xs="http://www.w3.org/2001/XMLSchema">

   <xsl:output
           omit-xml-declaration="yes"
           method="html"
           doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
           doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

   <!--
   Disable annoying built-in rule, also for the modes we use.
   Ugly, should explictly walk tree and skip processing stuff we don't want to output
   But that's a TODO
   -->

   <xsl:template match="text()|@*" mode="html-head"/>
   <xsl:template match="text()|@*" mode="content-header"/>
   <xsl:template match="text()|@*"/>
   <xsl:template match="text()|@*" mode="content-footer"/>

   <xsl:variable name="imageSetName" select="/memory/active-game"/>
   <xsl:variable name="imageSetTitle" select="/memory/game/title[$imageSetName=../name]"/>

   <xsl:template match="/">
      <html>
         <head>
            <title>memory</title>
            <link rel="stylesheet" type="text/css" href="../css/memory.css" media="screen"/>
            <link rel="stylesheet" type="text/css" href="../../utils/colorpicker/css/colorpicker.css" media="screen"/>

            <script type="text/javascript">
               function getTheImageSet()
               {
               var theImageSet = new imageSet();
               theImageSet.name = "
               <xsl:value-of select="$imageSetName"/>
               ";
               theImageSet.title = "
               <xsl:value-of select="/memory/game/title[$imageSetName=../name]"/>
               ";
               theImageSet.cardImages = new Array(
               <xsl:apply-templates select="/memory/game/imageSet[$imageSetName=../name]"/>
               );
               theImageSet.cardBackImage = "
               <xsl:value-of select="/memory/game/cardBackImage[$imageSetName=../name]"/>
               ";
               theImageSet.cardHeight =
               <xsl:value-of select="/memory/game/cardHeight[$imageSetName=../name]"/>
               ;
               theImageSet.cardWidth =
               <xsl:value-of select="/memory/game/cardWidth[$imageSetName=../name]"/>
               ;
               return theImageSet;
               }
            </script>
            <script type="text/javascript" src="../js/imageSet.js"></script>
            <script type="text/javascript" src="../js/imageSets.js"></script>
            <script type="text/javascript" src="../js/config.js"></script>
            <script type="text/javascript" src="../js/httpRequestUtils.js"></script>
            <script type="text/javascript" src="../js/memory.js"></script>

            <script type="text/javascript" src="../../utils/colorpicker/js/colorpicker.js"></script>
            <script type="text/javascript" src="../../utils/colorpicker/js/colorpickeractivator.js"></script>
         </head>
         <body id="body" onload="initMemory()">
            <div id="container" class="container">
               <div id="links" class="memoryLinks" onclick="activateCP(this)">
                  <span>
                     <a class="topMenu" href="memory.xml">-Nog een keer-</a>
                     <a class="topMenu" href="#" onclick="solveMemory()">-Oplossing-</a>
                  </span>
               </div>

               <div id="memoryMap" class="memoryMap" onclick="activateCP(this)">
                  <table cellpadding="0" cellspacing="5" border="0">
                     <tr>
                        <td className="memoryField" align="center" valign="middle" width="40" height="40">
                           <a href="javascript:showImage(1)">
                              <img src="../gfx/bjwl/card01.jpg" id="card1" height="150" width="150" border="0"/>
                           </a>
                        </td>
                     </tr>
                  </table>
               </div>

               <div id="numberOfTries" class="numberOfTries" onclick="activateCP(this)">
                  <span>Aantal pogingen:&amp;nbsp;0</span>
               </div>
               <div id="statusField" class="statusField" onclick="activateCP(this)">
               </div>

            </div>

            <div id="plugin" onmousedown="HSVslide('drag','plugin',event)"
                 style="TOP: 140px; LEFT: 430px; Z-INDEX: 20auto; display:none">
               <div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">F1FFCC</div>
               <div id="plugCLOSE" onmousedown="toggle('plugin')">X</div>
               <br/>

               <div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
                  <div id="SVslide" style="TOP: -4px; LEFT: -4px;">
                     <br/>
                  </div>
               </div>
               <form action="#" id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
                  <div id="Hslide" style="TOP: -7px; LEFT: -8px;">
                     <br/>
                  </div>
                  <div id="Hmodel"></div>
               </form>
            </div>
            <script type="text/javascript">

               loadSV();
               updateH('F1FFCC');

            </script>

            <div id="debug" class="debug">
               <xsl:apply-templates select="/memory/game/imageSet[$imageSetName=../name]"/>
            </div>
         </body>
      </html>
      <xsl:apply-templates/>
   </xsl:template>

   <xsl:template match="image">
      "
      <xsl:value-of select="."/>
      "
      <xsl:if test=".!=../image[last()]">,</xsl:if>
   </xsl:template>
</xsl:stylesheet>

